<template>
  <div>
    <el-dialog v-model="currShow" title="新增订单" width="500px" :before-close="close" :close-on-click-modal="false">
      <el-form :model="queryForm" v-loading="formLoading" :rules="rules" ref="queryRef" label-width="100px"
        class="demo-form-inline">
        <el-row>
          <el-col :span="23">
            <el-form-item label="姓名" prop="stu_code">
              <el-select v-model="queryForm.stu_code" @change="selectStudent(queryForm.stu_code)" class="m-2"
                placeholder="请选择">
                <el-option v-for="item in studentList" :key="item.stu_code" :label="item.stu_name" :value="item.stu_code">
                  <span style="float: left">{{ item.stu_name }}</span>
                  <span style="float: right">{{ item.stu_gender }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="课程" prop="cur_code">
              <el-select v-model="queryForm.cur_code" @change="selectCourse(queryForm.cur_code)" class="m-2"
                placeholder="请选择">
                <el-option v-for="item in courseList" :key="item.course_id" :label="item.cur_name"
                  :value="item.course_id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="老师" prop="tea_name">
              <el-input v-model.trim="queryForm.tea_name" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="价格" prop="cur_price">
              <el-input v-model.trim="queryForm.cur_price" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close(false)">取消</el-button>
          <el-button type="primary" @click="submit(queryRef)" :loading="submitLoading">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { addOrder } from '@/api/goodsOrder/addOrder'
import { queryEnableCourse, queryAllStuList } from '@/api/public'
import { nextTick } from 'vue'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { defineComponent, reactive, ref, watch } from '@vue/runtime-core'
import { ElMessage } from 'element-plus'
export default defineComponent({
  props: {
    valueShow: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    // 变量区域
    const { proxy } = useCurrentInstance()
    const currShow = ref(false)
    const formLoading = ref(false)
    const submitLoading = ref(false)
    const queryRef: any = ref(null)
    const courseList: any = ref(null)
    const studentList: any = ref(null)
    const queryForm: any = ref({
      stu_code: null,
      stu_name: null,
      cur_code: null,
      cur_name: null,
      cur_price: null,
      tea_code: null,
      tea_name: null
    })
    const rule = { required: true, message: '必填项', trigger: 'blur' }
    const rules = {
      stu_code: [rule],
      cur_code: [rule]
    }

    const close = (val) => {
      emit('closeAddOrder', val)
      nextTick(() => {
        queryRef.value.resetFields()
      })
    }

    const selectStudent = (stu_code) => {
      const obj = studentList.value.find(item => item.stu_code === stu_code)
      queryForm.value.stu_name = obj.stu_name
    }

    const selectCourse = (cur_code) => {
      const obj = courseList.value.find(item => item.course_id === cur_code)
      queryForm.value.tea_code = obj.teacher_id
      queryForm.value.tea_name = obj.tea_name
      queryForm.value.cur_price = obj.cur_price
      queryForm.value.cur_name = obj.cur_name
    }

    const submit = (formRef) => {
      formRef.validate((valid) => {
        if (!valid) return
        formLoading.value = true
        submitLoading.value = true
        addOrder(queryForm.value).then((res: any) => {
          if (res.data.repeat) {
            ElMessage.error(res.message)
          } else {
            close(true)
            ElMessage.success(res.message)
          }
        }).finally(() => {
          formLoading.value = false
          submitLoading.value = false
        })
      })
    }

    const getEnableCourse = () => {
      queryEnableCourse().then((res: any) => {
        courseList.value = res.data
      })
    }

    const getAllStuList = () => {
      queryAllStuList().then((res: any) => {
        studentList.value = res.data
      })
    }

    const validateNumber = (obj, val) => {
      // 用正则表达式检查输入是否合法
      // const regex = /^\d*\.?\d{0,2}$/
      // 如果输入不合法，移除最后一位字符
      // !regex.test(obj[val]) && (obj[val] = obj[val].slice(0, -1))
      obj[val] = obj[val].replace(/[^0-9]/g, '')
    }

    // 钩子函数区域
    watch(
      () => props.valueShow,
      (newVal) => {
        currShow.value = newVal
      }
    )

    // 方法回调区域
    getEnableCourse() // 获取可选课程下拉
    getAllStuList() // 获取全部学生下拉

    // return返回值
    return {
      currShow,
      formLoading,
      submitLoading,
      queryRef,
      queryForm,
      rules,
      courseList,
      studentList,
      close,
      submit,
      validateNumber,
      selectCourse,
      selectStudent
    }
  },
})
</script>
<style scoped lang="scss"></style>
